<!-- 首页图片未登录，添加图片modal -->
<template>
    <a-modal :width='400'
    :title='modalProps.title'
    :visible="visible"
    @ok="handleOk"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel" 
    >
     
      <a-form  :form='form' :label-col='{ span : 6}'  :wrapper-col="{ span : 16 }" >  
        <a-form-item  label='星期天数'  >
            <a-select  style="width: 120px" @change="handleChange" v-decorator="[
          'dayOfWeek',formset.dayOfWeek ]">
              <a-select-option v-for='item in weekArr' :key='index' :value="item.value">{{item.title}}</a-select-option> 
            </a-select> 
        </a-form-item>
        <a-form-item  label='开始时间'  >
          <a-input-group  compact>
            <a-select   style="width: 80px" @change="handleChange" v-decorator="[
              'hourAM',formset.hourAM ]">
              <a-select-option v-for='item in HourArrAM' :key='index' :value="item.value">{{item.title}}</a-select-option> 
            </a-select> 
            <a-select   style="width: 80px" @change="handleChange" v-decorator="[
              'hourAMMin',formset.hourAMMin ]">
              <a-select-option v-for='item in MinuteArr' :key='index' :value="item.value">{{item.title}}</a-select-option> 
            </a-select> 
          </a-input-group> 
        </a-form-item>

        <a-form-item  label='结束时间'  >
          <a-input-group compact>
            <a-select  style="width: 80px" @change="handleChange"  v-decorator="[
                'hourPM',formset.hourPM ]">
              <a-select-option v-for='item in HourArrPM' :key='index' :value="item.value">{{item.title}}</a-select-option> 
            </a-select> 
            <a-select  style="width: 80px" @change="handleChange" v-decorator="[
                'hourPMMin',formset.hourPMMin ]">
              <a-select-option v-for='item in MinuteArr' :key='index' :value="item.value">{{item.title}}</a-select-option> 
            </a-select> 
          </a-input-group>
        </a-form-item> 

        <a-form-item  style='display: none' >
            <a-input    v-decorator="['code' , baseInit.code]" />
        </a-form-item>

      </a-form> 
    </a-modal>
</template>
<script>
    
  import  imageUpload from  '@/components/common/imageUpload'
  
  const HourArrAM = []
  const HourArrPM = []
  const MinuteArr = []
   
  for(let i=6; i<13; i++){
    HourArrAM.push({
      value:i<10? '0'+ i : i.toString(),
      title:i<10? '0'+ i : i.toString()
    })
  }
  for(let i=13; i<24; i++){
    HourArrPM.push({
      value:i.toString(),
      title:i.toString()
    })
  }
  for(let i=0;i<60;i=i+15){
    MinuteArr.push({
      value:i<10? '0'+i : i.toString(),
      title:i<10? '0'+i : i.toString()
    })
  }


export default {
  name: 'chooseOnTimeModal',
  props:{
      visible:{
        type:Boolean,
        default:false
      }, 
  },
  data () {
    return {
        modalProps:{
          title:'营业时间',
          isEdit:false, /*表单进入状态*/
        }, 
        weekArr:[
          { value:1,title:'周一' },
          { value:2,title:'周二' },
          { value:3,title:'周三' },
          { value:4,title:'周四' },
          { value:5,title:'周五' },
          { value:6,title:'周六' },
          { value:0,title:'周日' },
        ],
        HourArrAM,
        HourArrPM,
        MinuteArr,

        formset:{
          dayOfWeek:{ rules: [{ required: true, message: 'Please select your gender!' }],initialValue:1},
          hourAM:{initialValue:'06'},
          hourAMMin:{initialValue:'00'},
          hourPM:{initialValue:'13'},
          hourPMMin:{initialValue:'00'},
         
        },
        editIndex:null,
        /*等待动作*/
        confirmLoading: false,

        fileData:[],/*图片返回*/
        /*form 初始值*/
        baseInit:{
          code:{initialValue:''},/*隐藏input里加上code*/

          imageFileCode:{initialValue:'',rules : [{ required : true , message : '请上传首页图' }]},/*隐藏input里加上code*/
          sort:{ initialValue :''},
          imageText:{ initialValue :''},
          imageTitle:{ initialValue :''}, 
        },      
        currentSort:null,                                                        
    }
  },
  methods:{
    handleCancel(e) {
      this.$emit('handleCancel') 
    },
    //提交
    handleOk(e) {
      let that = this,url 
        this.form.validateFields((err, values) => {
          if (!err) {
            console.log('Received values of form: ', values); 
            // values.startTime = values.hourAM + ':' + values.hourAMMin
            // values.endTime = values.hourPM + ':' + values.hourPMMin
            if(that.modalProps.isEdit == false){
              that.$emit('handleOk',values)
            }
            if(that.modalProps.isEdit == true){
              that.$emit('handleEditok',values,that.editIndex)
            }
            
            // this.confirmLoading = true; 
          
          }
        });
    },  

    /*表单图片操作 对应数据绑定*/
    removeFile(e){ 
      this.removeFile_fromList(e,this.fileData)  
      //重置绑定表单项的值
      this.form.setFieldsValue({['imageFileCode']:''}) 
    },
    uploadSuccess(file,fileList){
      //重置绑定表单项的值
      this.form.setFieldsValue({['imageFileCode']:file.response.data.code }) 
    }
     

  },
  components:{
    imageUpload
  },
  beforeCreate () {
    this.form = this.$form.createForm(this);
  },
  mounted(){
    this.$nextTick(()=>{
      this.$on('openDialog',function(){ 
        this.modalProps.isEdit = false 
         
          this.formset.dayOfWeek.initialValue = null
          this.formset.hourAM.initialValue = null
          this.formset.hourAMMin.initialValue = null 
          this.formset.hourPM.initialValue = null 
          this.formset.hourPMMin.initialValue = null
        
      })
      this.$on('editDialog',function(data,index){
          this.modalProps.isEdit = true 
          let hourAMArr = data.startTime.split(':')
          let hourPMArr = data.endTime.split(':')
          this.editIndex = index
          
          this.formset.dayOfWeek.initialValue = data.dayOfWeek 
          this.formset.hourAM.initialValue = hourAMArr[0] 
          this.formset.hourAMMin.initialValue = hourAMArr[1] 
          this.formset.hourPM.initialValue = hourPMArr[0] 
          this.formset.hourPMMin.initialValue = hourPMArr[1]
        
      })
    })
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>